import React from 'react';
import { connect } from 'dva';
import { Card, Table } from 'antd';


const TopTenStocksList = ({
    fieldList = [],
    list = [],
    total = 0,
}) => {

    const height = document.body.clientHeight
    //const width=130
    const width = 75
    const columns = [{
        title: '',
        children: [{
            title: '股票代码',
            dataIndex: 'stockCode',
            key: 'stockCode',
        }]
    }, {
        title: '',
        children: [{
            title: '股票简称',
            dataIndex: 'stockAbbreviation',
            key: 'stockAbbreviation',
        }, {
            title: '占比',
            dataIndex: 'occupationRatio',
            key: 'occupationRatio',
            render: (text, record) => (
                <div className={`progress ${text>0?'':'minus'}`}>
                    <progress value={text>0?text.multiplyBy100():text.multiplyBy100()*-1} max="100"></progress><span>{text.multiplyBy100()}%</span>
                </div>
            )
        }, {
            title: 'A股市值/亿',
            dataIndex: 'marketValue',
            key: 'marketValue',
        }, {
            title: '申万I级',
            dataIndex: 'industry1',
            key: 'industry1',
        }, {
            title: '申万II级',
            dataIndex: 'industry2',
            key: 'industry2',
        }]
    }, {
        title: '股票表现',
        children: [{
            title: '过往1周',
            dataIndex: 'week',
            key: 'week',
        }, {
            title: '过往1个月',
            dataIndex: 'month',
            key: 'month',
        }, {
            title: '过往3个月',
            dataIndex: 'quarter',
            key: 'quarter',
        }, {
            title: '过往1年',
            dataIndex: 'year',
            key: 'year',
        }]
    },
    {
        title: '估值及财务指标',
        children: [{
            title: 'P/E TTM',
            dataIndex: 'peTtm',
            key: 'peTtm',
        },
        {
            title: 'PE未来12个月',
            dataIndex: 'peYear',
            key: 'peYear',
        }, {
            title: '历史PEG',
            dataIndex: 'historyPeg',
            key: 'historyPeg',
        }, {
            title: '每股收益预测',
            dataIndex: 'profitForecast',
            key: 'profitForecast',
        }, {
            title: '是否属于CSI300',
            dataIndex: 'isIn300',
            key: 'isIn300',
        }]
    }]


    const dataSource = list


    return (
        <Table
            columns={columns}
            dataSource={dataSource}
            rowKey="stockCode"
            pagination={false}
        />
    )
}
/**
 * TopTenStocks 前十大重仓股票
 * 子组件
 *	TopTenStocksList   前十大重仓股票统计表
 */
class TopTenStocks extends React.Component {
    state = {
        data: this.props.topTenStocks
    }
    componentDidMount() {
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {
        if ((nextProps.lPortId !== this.props.lPortId) || (nextProps.trendBegindate !== this.props.trendBegindate) || (nextProps.trendEnddate !== this.props.trendEnddate)) {
            this.fetchData(nextProps)
        }
        if (nextProps.topTenStocks !== this.props.topTenStocks) {
            nextProps.topTenStocks.list.push({
                stockCode: '合计：',
                occupationRatio: nextProps.topTenStocks.total
            })

            // if (nextProps.topTenStocks.fieldList&&nextProps.topTenStocks.fieldList.length) {
            //     const ratioArr = nextProps.topTenStocks.fieldList.filter(item => (item.name.indexOf('占比')>-1)||(item.name.indexOf('过往')>-1))
            //     nextProps.topTenStocks.list.map(item => {
            //         ratioArr.map(it=>{
            //             item[it.id] = item[it.id]&&item[it.id].toPercent()
            //         })
            //     })
            // }
            if (nextProps.topTenStocks.fieldList&&nextProps.topTenStocks.fieldList.length) {
                const ratioArr = nextProps.topTenStocks.fieldList.filter(item =>(item.name.indexOf('过往')>-1))
                nextProps.topTenStocks.list.map(item => {
                    ratioArr.map(it=>{
                        item[it.id] = item[it.id]&&item[it.id].toPercent()
                    })
                })
                const otherArr = nextProps.topTenStocks.fieldList.filter(item =>(item.name.indexOf('P')>-1) || (item.name.indexOf('亿')>-1) || (item.name.indexOf('每股收益预测')>-1))
                nextProps.topTenStocks.list.map(item => {
                    otherArr.map(it=>{
                        item[it.id] = item[it.id]&&Math.round(item[it.id]*100)/100
                    })
                })
            }

            this.setState({
                data: nextProps.topTenStocks,
            })
        }
    }
    //查询数据
    fetchData = (props) => {
        this.props.dispatch({
            type: 'combinatorialAnalysis/getTopTenStocks',
            payload: props
        })
    }
    render() {
        return (
            <Card title={`前十大重仓股票：(${this.state.data.date})`} bordered={false} style={{ overflowX: 'auto' }} className="topTenStocks">
                <TopTenStocksList {...this.state.data} />
            </Card>
        );
    }
}

TopTenStocks.defaultProps = {
    lPortId: null,//产品组合ID
    cBenchCode: null,//业绩基准ID
    topTenStocks: {
        "date": "2018-03-02",
        "total": 0.28,
        "list": [
            {
                "industry1": "医药生物",
                "peTtm": null,
                "week": 0.0004,
                "stockAbbreviation": "华东医药",
                "year": -0.2677,
                "industry2": "医药商业",
                "isIn300": "是",
                "marketValue": 552.8426,
                "peYear": null,
                "profitForecast": null,
                "stockCode": "000963-SZ",
                "month": 0.0247,
                "historyPeg": null,
                "occupationRatio": 0,
                "quarter": 0.1244
            }
        ],
        "fieldList": [
            {
                "name": "股票代码",
                "id": "stockCode"
            },
            {
                "name": "股票简称",
                "id": "stockAbbreviation"
            },
            {
                "name": "占比",
                "id": "occupationRatio"
            },
            {
                "name": "A股市值/亿",
                "id": "marketValue"
            },
            {
                "name": "申万I级",
                "id": "industry1"
            },
            {
                "name": "申万II级",
                "id": "industry2"
            },
            {
                "name": "过往1周",
                "id": "week"
            },
            {
                "name": "过往1个月",
                "id": "month"
            },
            {
                "name": "过往3个月",
                "id": "quarter"
            },
            {
                "name": "过往1年",
                "id": "year"
            },
            {
                "name": "P/E TTM",
                "id": "peTtm"
            },
            {
                "name": "PE未来12个月",
                "id": "peYear"
            },
            {
                "name": "历史PEG",
                "id": "historyPeg"
            },
            {
                "name": "每股收益预测",
                "id": "profitForecast"
            },
            {
                "name": "是否属于CSI300",
                "id": "isIn300"
            }
        ]
    }

}


export default connect()(TopTenStocks)